<template>
  <div class="wrap">
    <div class="header">
      <div class="iconfont back-icon" @click="back">&#xe6b1;</div>
      <div class="header-left">我的心愿单</div>
    </div>

    <div class="block"></div>
    <div class="thingbox" v-for="item in this.$store.state.wantlist" :key="item.food_id">
      <div class="username">
        <img :src="item.image" alt="">
        <p class="name">{{item.username}}</p>
        <p class="price">{{item.food_title}}</p>
      </div>
      <div class="swiper-box">
        <div class="show">
         <img class="imgbig" :src="item.food_picture">
        </div>
      </div>

      <div class="detail">
        <p class="desc">
        {{item.food_content}}
        </p>
      </div>

      <div class="operate">
        <div class="del" @click="del(item.food_id)">删除心愿单</div>
      </div>

    </div>
  </div>
</template>

<script>
    import {MessageBox} from 'mint-ui'
    export default {
        name: "foodlist",
        methods: {
            back() {
                this.$router.push({path: '/personal'})
            },
            del(eno) {
                MessageBox.confirm('确定要删除你的发布吗？').then(
                    (action) => {
                                let i = this.$store.state.wantlist.findIndex(item => item.food_id === eno);
                                this.$store.state.wantlist.splice(i, 1)
                    }
                )
            }
        }
    }
</script>

<style scoped>
  .header {
    background-color: #00bcd4;
    line-height:50px;
    color:lightyellow;
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }
  .back-icon {
    font-size:20px;
    margin-top:-4px;
    margin-left:-20px;
  }
  .header-left {
    font-size:20px;
    text-align:center;
  }
  .wrap {
    width: 100%;
    height: 100vh;
    background-color: #f7f7f7;
    overflow-y: scroll;
  }
  .head {
    width: 100%;
    height: 4.4rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .header-icon{
    width: 3rem;
    height: 3rem;
  }
  .block{
    height: 50px;
  }
  .thingbox {
    width: 95%;
    height: 312px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    background-color: #fff;
    margin: 0 auto;
    margin-top: 13px;
  }
  .imgbig{
    width: 140px;
    height: 150px;
    margin-top: -191px;
  }
  .nothing img {
    width: 5rem;
    height: 5rem;
  }
  .name {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #000;
    font-size: 20px;
    font-weight: 700;
    padding-left: 15px;
    margin-bottom: 166px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 center;
  }
  .username {
    display: -webkit-flex;
    display: flex;
    font-size: 1.4rem;
    height: 5rem;
    /*line-height: 5rem;*/
    align-items: center;
    padding: 0rem 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #f6f6f6;
  }
  .username img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: -39px;
    margin-bottom: 163px;
  }
  .price {
    color: red;
    font-size: 15px;
    margin-right: -37px;
    margin-bottom: 161px;
  }
  .detail {
    width: 100%;
    margin-top: .6rem;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .detail .desc{
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-left: -41px;
    margin-top: -35px;
  }
  .operate {
    width: 100%;
    height: 4rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;

  }
  .del {
    height: 20px;
    text-align: center;
    border: 1px solid #00bcd4;
    border-radius: 1.4rem;
    color: #00bcd4;
    position: absolute;
    right: 13px;
    padding: 3px 4px;
  }
</style>
